<template>
  <view>
    <view class="rate-box">
      <view class="rate-inner rateBox" :id="id">
        <svg-star
          class="single-star"
          v-for="(item, key) in total"
          @tap.native="onStarClk(key)"
          :src="star1"
          :key="key"
          :width="width"
          :height="height"
          :color="innerColor"
        />
      </view>
      <view class="rate-outer" :style="{ width: percentW + '%' }">
        <view class="rate-outer-box">
          <svg-star
            class="single-star"
            @tap.native="onStarClk(key)"
            :src="star2"
            v-for="(item, key) in total"
            :key="key"
            :width="width"
            :height="height"
            :color="outerColor"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import {default as store} from '../store/index'
import svgStar from "./svg-star";
import Taro, { eventCenter, getCurrentInstance } from "@tarojs/taro";

export default {
  name: "rateStar",
  data() {
    return {
      star1: require("../../image/star.png"),
      star2: require("../../image/star-light.png"),
      percentW: 0,
      starBoxW: "",
      // disabled: false,
    };
  },
  props: {
    id: "",
    disabled: {
      default: false,
    },
    percent: {
      default: 0,
    },
    total: {
      default: 5,
    },
    width: {
      default: 15,
    },
    height: {
      default: 17,
    },
    innerColor: {
      default: "#FFF5D4",
    },
    outerColor: {
      default: "#FFDB6B",
    },
  },
  components: { svgStar },
  watch: {
    percent(val) {
      this.percentW = this.percent;
      // console.log("rateStar", this.percent, val);
    },
    id(val) {
      // console.log("watch id", val);
    },
  },
  methods: {
    onStarClk(index) {
      if (this.disabled !== false) return;
      this.percentW = ((index + 1) / this.total) * 100;
      this.$emit("item", index + 1);
    },
  },
  mounted() {
    this.percentW = this.percent;

    // Taro.nextTick(() => {
    //   Taro.createSelectorQuery()
    //     .select("#" + this.id)
    //     .boundingClientRect()
    //     .exec((res) => {
    //       console.log("rate next", res, this.id);
    //       if (res && res[0]) {
    //         this.starBoxW = res[0].width;
    //       } else {
    //         console.log("id-----------", this.id);
    //       }
    //     });
    // });

    // this.starBoxW = query.select("#rateBox").offsetWidth;
  },
};
</script>

<style>
</style>
